<template>
  <div class="p-6">
    <!-- 页面标题 -->
    <div class="mb-6">
      <h1 class="text-2xl font-bold text-gray-800 mb-2">提醒设置</h1>
      <p class="text-gray-600">管理您的健康提醒和通知设置</p>
    </div>

    <!-- 提醒类型设置 -->
    <el-card class="mb-6">
      <template #header>
        <span class="text-lg font-semibold">提醒类型</span>
      </template>
      
      <el-form :model="reminderSettings" label-width="120px">
        <el-form-item label="血压测量">
          <el-switch v-model="reminderSettings.bloodPressure.enabled" />
          <div v-if="reminderSettings.bloodPressure.enabled" class="ml-4">
            <el-time-picker
              v-model="reminderSettings.bloodPressure.time"
              placeholder="选择时间"
              size="small"
            />
            <el-select
              v-model="reminderSettings.bloodPressure.frequency"
              placeholder="选择频率"
              size="small"
              class="ml-2"
            >
              <el-option label="每天" value="daily" />
              <el-option label="每周" value="weekly" />
              <el-option label="每月" value="monthly" />
            </el-select>
          </div>
        </el-form-item>
        
        <el-form-item label="体重测量">
          <el-switch v-model="reminderSettings.weight.enabled" />
          <div v-if="reminderSettings.weight.enabled" class="ml-4">
            <el-time-picker
              v-model="reminderSettings.weight.time"
              placeholder="选择时间"
              size="small"
            />
            <el-select
              v-model="reminderSettings.weight.frequency"
              placeholder="选择频率"
              size="small"
              class="ml-2"
            >
              <el-option label="每天" value="daily" />
              <el-option label="每周" value="weekly" />
              <el-option label="每月" value="monthly" />
            </el-select>
          </div>
        </el-form-item>
        
        <el-form-item label="运动提醒">
          <el-switch v-model="reminderSettings.exercise.enabled" />
          <div v-if="reminderSettings.exercise.enabled" class="ml-4">
            <el-time-picker
              v-model="reminderSettings.exercise.time"
              placeholder="选择时间"
              size="small"
            />
            <el-select
              v-model="reminderSettings.exercise.frequency"
              placeholder="选择频率"
              size="small"
              class="ml-2"
            >
              <el-option label="每天" value="daily" />
              <el-option label="每周" value="weekly" />
            </el-select>
          </div>
        </el-form-item>
        
        <el-form-item label="用药提醒">
          <el-switch v-model="reminderSettings.medication.enabled" />
          <div v-if="reminderSettings.medication.enabled" class="ml-4">
            <el-time-picker
              v-model="reminderSettings.medication.time"
              placeholder="选择时间"
              size="small"
            />
            <el-input
              v-model="reminderSettings.medication.note"
              placeholder="用药说明"
              size="small"
              class="ml-2"
              style="width: 200px"
            />
          </div>
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" @click="saveSettings">保存设置</el-button>
          <el-button @click="resetSettings">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 通知设置 -->
    <el-card class="mb-6">
      <template #header>
        <span class="text-lg font-semibold">通知设置</span>
      </template>
      
      <el-form :model="notificationSettings" label-width="120px">
        <el-form-item label="声音提醒">
          <el-switch v-model="notificationSettings.sound" />
        </el-form-item>
        
        <el-form-item label="震动提醒">
          <el-switch v-model="notificationSettings.vibration" />
        </el-form-item>
        
        <el-form-item label="邮件通知">
          <el-switch v-model="notificationSettings.email" />
        </el-form-item>
        
        <el-form-item label="免打扰时间">
          <el-switch v-model="notificationSettings.quietHours.enabled" />
          <div v-if="notificationSettings.quietHours.enabled" class="ml-4">
            <el-time-picker
              v-model="notificationSettings.quietHours.start"
              placeholder="开始时间"
              size="small"
            />
            <span class="mx-2">至</span>
            <el-time-picker
              v-model="notificationSettings.quietHours.end"
              placeholder="结束时间"
              size="small"
            />
          </div>
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" @click="saveNotificationSettings">保存设置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 自定义提醒 -->
    <el-card>
      <template #header>
        <div class="flex justify-between items-center">
          <span class="text-lg font-semibold">自定义提醒</span>
          <el-button type="primary" size="small" @click="addCustomReminder">
            添加提醒
          </el-button>
        </div>
      </template>
      
      <el-table :data="customReminders" style="width: 100%">
        <el-table-column prop="title" label="提醒标题" />
        <el-table-column prop="time" label="提醒时间" />
        <el-table-column prop="frequency" label="频率">
          <template #default="scope">
            {{ getFrequencyText(scope.row.frequency) }}
          </template>
        </el-table-column>
        <el-table-column prop="enabled" label="状态" width="80">
          <template #default="scope">
            <el-switch v-model="scope.row.enabled" size="small" />
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120">
          <template #default="scope">
            <el-button type="text" size="small" @click="editReminder(scope.row)">
              编辑
            </el-button>
            <el-button type="text" size="small" @click="deleteReminder(scope.$index)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 添加/编辑自定义提醒对话框 -->
    <el-dialog
      v-model="dialogVisible"
      :title="editingReminder ? '编辑提醒' : '添加提醒'"
      width="400px"
    >
      <el-form :model="currentReminder" label-width="80px">
        <el-form-item label="标题">
          <el-input v-model="currentReminder.title" placeholder="请输入提醒标题" />
        </el-form-item>
        <el-form-item label="时间">
          <el-time-picker v-model="currentReminder.time" placeholder="选择时间" />
        </el-form-item>
        <el-form-item label="频率">
          <el-select v-model="currentReminder.frequency" placeholder="选择频率">
            <el-option label="每天" value="daily" />
            <el-option label="每周" value="weekly" />
            <el-option label="每月" value="monthly" />
          </el-select>
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            v-model="currentReminder.note"
            type="textarea"
            :rows="3"
            placeholder="请输入备注信息"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveReminder">保存</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'

const reminderSettings = reactive({
  bloodPressure: {
    enabled: true,
    time: new Date(2024, 0, 1, 8, 0),
    frequency: 'daily'
  },
  weight: {
    enabled: true,
    time: new Date(2024, 0, 1, 7, 0),
    frequency: 'weekly'
  },
  exercise: {
    enabled: true,
    time: new Date(2024, 0, 1, 18, 0),
    frequency: 'daily'
  },
  medication: {
    enabled: false,
    time: new Date(2024, 0, 1, 9, 0),
    frequency: 'daily',
    note: ''
  }
})

const notificationSettings = reactive({
  sound: true,
  vibration: true,
  email: false,
  quietHours: {
    enabled: false,
    start: new Date(2024, 0, 1, 22, 0),
    end: new Date(2024, 0, 1, 7, 0)
  }
})

const customReminders = ref([
  {
    title: '喝水提醒',
    time: new Date(2024, 0, 1, 10, 0),
    frequency: 'daily',
    enabled: true,
    note: '记得多喝水保持身体健康'
  },
  {
    title: '眼保健操',
    time: new Date(2024, 0, 1, 15, 0),
    frequency: 'daily',
    enabled: false,
    note: '保护视力，缓解眼疲劳'
  }
])

const dialogVisible = ref(false)
const editingReminder = ref(false)
const currentReminder = reactive({
  title: '',
  time: new Date(2024, 0, 1, 9, 0),
  frequency: 'daily',
  note: '',
  enabled: true
})

const getFrequencyText = (frequency) => {
  const map = {
    daily: '每天',
    weekly: '每周',
    monthly: '每月'
  }
  return map[frequency] || frequency
}

const saveSettings = () => {
  localStorage.setItem('reminderSettings', JSON.stringify(reminderSettings))
  ElMessage.success('提醒设置已保存')
}

const resetSettings = () => {
  Object.assign(reminderSettings, {
    bloodPressure: { enabled: true, time: new Date(2024, 0, 1, 8, 0), frequency: 'daily' },
    weight: { enabled: true, time: new Date(2024, 0, 1, 7, 0), frequency: 'weekly' },
    exercise: { enabled: true, time: new Date(2024, 0, 1, 18, 0), frequency: 'daily' },
    medication: { enabled: false, time: new Date(2024, 0, 1, 9, 0), frequency: 'daily', note: '' }
  })
  ElMessage.success('设置已重置')
}

const saveNotificationSettings = () => {
  localStorage.setItem('notificationSettings', JSON.stringify(notificationSettings))
  ElMessage.success('通知设置已保存')
}

const addCustomReminder = () => {
  editingReminder.value = false
  Object.assign(currentReminder, {
    title: '',
    time: new Date(2024, 0, 1, 9, 0),
    frequency: 'daily',
    note: '',
    enabled: true
  })
  dialogVisible.value = true
}

const editReminder = (reminder) => {
  editingReminder.value = true
  Object.assign(currentReminder, { ...reminder })
  dialogVisible.value = true
}

const deleteReminder = (index) => {
  customReminders.value.splice(index, 1)
  ElMessage.success('提醒已删除')
}

const saveReminder = () => {
  if (!currentReminder.title.trim()) {
    ElMessage.warning('请输入提醒标题')
    return
  }
  
  if (editingReminder.value) {
    const index = customReminders.value.findIndex(item => item.title === currentReminder.title)
    if (index !== -1) {
      customReminders.value[index] = { ...currentReminder }
    }
  } else {
    customReminders.value.push({ ...currentReminder })
  }
  
  dialogVisible.value = false
  ElMessage.success('提醒已保存')
}

// 初始化设置
const loadSettings = () => {
  const savedReminderSettings = localStorage.getItem('reminderSettings')
  const savedNotificationSettings = localStorage.getItem('notificationSettings')
  
  if (savedReminderSettings) {
    Object.assign(reminderSettings, JSON.parse(savedReminderSettings))
  }
  
  if (savedNotificationSettings) {
    Object.assign(notificationSettings, JSON.parse(savedNotificationSettings))
  }
}

loadSettings()
</script>